<template>
  <RemoteTableSelect
    :value="value"
    primaryKey="id"
    :namespace="myPermissionNamespace"
    :columns="columns"
    :limit="1"
    placeholder="请添加所需权限, 最多一条"
    @onChange="handleChange"
  >
    <SearchBar :namespace="myPermissionNamespace">
      <SearchBarItem label="id:" :labelLg="2">
        <Input type="text" v-model="myPermissionQueryParam.id.value" clearable />
      </SearchBarItem>
      <SearchBarItem label="名称:" :labelLg="5">
        <Input
          type="text"
          v-model="myPermissionQueryParam.name.value"
          placeholder="请输入, 支持模糊查询"
          clearable
        />
      </SearchBarItem>
      <SearchBarItem label="编码:" :labelLg="5">
        <Input
          type="text"
          v-model="myPermissionQueryParam.code.value"
          placeholder="请输入, 支持模糊查询"
          clearable
        />
      </SearchBarItem>
    </SearchBar>
  </RemoteTableSelect>
</template>

<script>
import RemoteTableSelect from "@/components/RemoteTableSelect";
import RemoteSelect from "@/components/RemoteSelect";
import SearchBar from "@/components/SearchBar";
import moduleRegist from "@/utils/moduleRegist";
import {
  namespace as myPermissionNamespace,
  module as myPermissionModule
} from "@/views/admin/Permission/currentApplicationPermissionModule";
import { Input } from "view-design";
export default {
  components: {
    Input,
    RemoteTableSelect,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    RemoteSelect
  },
  props: {
    value: {}
  },
  model: {
    prop: "value",
    event: ["onChange"]
  },
  name: "DataPermission",
  data: function() {
    return {
      defaultValue: [],
      myPermissionNamespace: myPermissionNamespace,
      formData: {},
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "id",
          key: "id",
          align: "center",
          width: 250
        },
        {
          title: "名称",
          key: "name",
          align: "center",
          width: 200
        },
        {
          title: "编码",
          key: "code",
          align: "center",
          width: 250
        },
        {
          title: "所属应用",
          key: "applicationName",
          align: "center",
          width: 250
        },
        {
          title: "简介",
          key: "describe",
          align: "center",
          minWidth: 200
        }
      ]
    };
  },
  computed: {
    myPermissionQueryParam: {
      get() {
        return this.$store.state[myPermissionNamespace].query;
      },
      set(value) {
        this.$store.commit(`${myPermissionNamespace}/saveState`, {
          query: value
        });
      }
    }
  },
  beforeMount() {
    moduleRegist(myPermissionModule);
  },
  methods: {
    handleChange(data) {
      this.$emit("onChange", data);
    }
  }
};
</script>

<style>
</style>